<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="utf-8"/>
    <title>layui</title>
    <meta name="renderer" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
    <link rel="stylesheet" href="/lib/layui-v2.5.5/css/layui.css" media="all"/>
    <link rel="stylesheet" href="/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all"/>
    <link rel="stylesheet" href="/css/public.css" media="all"/>
    <style>
        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }


        .layuimini-main {
            margin: 0px 10px 10px 0px;
        }

        .layui-tab {
            margin: 0;
            text-align: left !important;
        }

        .icon {
            margin-right: 10px;
            color: #1aa094;
        }

        .layui-card-header {
            background-color: #cbddf3;
            padding: 5px;
            font-size: 14px;
            border: 1px solid #99bce8;
            box-shadow: #f3f7fb 0 1px 0px 0 inset;
            height: 20px;
            line-height: 20px;
        }

        .layui-tab-content {
            padding: 5px !important;
        }

        .layui-card-body {
            height: 680px;
            border-color: #99bce8;
            border-width: 1px;
            border-style: solid;
            background: #fff;
        }

        .layui-card-table {
            padding: 0 !important;
            margin: 0 !important;
        }

        .layui-table-view, .layui-table {
            margin: 0 !important;
        }

        .layui-table td, .layui-table th {
            position: relative;
            padding: 5px 10px;
            min-height: 20px;
            line-height: 20px;
            font-size: 14px;
            color: #0C0C0C;
        }

        .layui-table-view .layui-table[lay-size=sm] th .layui-table-cell {
            line-height: 30px;
            height: 30px;
            font-weight: bold;
            font-size: 12px;
        !important:;
        }

        .layui-table-view .layui-table td, .layui-table-view .layui-table th {
            padding: 0;
            border-top: none;
            border-left: none;
        }

        .search-header {
            height: 30px;
            margin: 0;
            padding: 0;
            border-style: solid;
            border-color: #99bce8;
            border-width: 1px;
            background-color: #d3e1f1;
        }

        .layui-btn-search {
            /*border: 1px solid #C9C9C9;*/
            /*background-color: #fff;*/
            background-color: #d3e1f1;
            color: #0C0C0C;
        }

        .layui-nav {
            padding: 0;
            color: #0C0C0C !important;
        }

        .layui-nav .layui-nav-item a {
            display: block;
            padding-left: 5px;
            /*padding-right: 20px;*/
            color: #0C0C0C;
            transition: all .3s;
            -webkit-transition: all .3s;
            font-size: 12px !important;
        }

        dd a {
            padding: 0 20px !important;
        }

        /*.layui-nav-child{*/
        /*    padding: 0 20px !important;*/
        /*}*/
        .closeBox a span.layui-nav-more {
            border-color: #333 transparent transparent;
        }

        .closeBox .layui-nav-child {
            top: 34px;
        }

        .layui-table-click {
            background-color: #99BBFF !important;
        }

        .tableSelect {
            min-width: 0 !important;
        }
    </style>
</head>
<body>
<div class="layuimini-container" style="height:calc(100% - 4px)">
    <div class="layuimini-main">
        <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
            <ul class="layui-tab-title">
                <li class="layui-this">sqlquery</li>

            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <table id="sqlqueryTable" lay-filter="sqlqueryTable"></table>
                </div>

            </div>
        </div>


    </div>
</div>
<script type="text/html" id="toolbar" lay-filter="toolbar">
    <div>
        <div class="layui-btn-group">
            <input style="display:inline-block;width: 140px;height:30px;vertical-align:middle;border: 1px solid #C9C9C9;font-size: 14px;"
                   type="text" name="inputCode" id="inputCode" placeholder="关键词搜索" autocomplete="off"
                   class="layui-input">
            <button class="layui-btn layui-btn-sm layui-btn-primary tableSelect_btn_search" lay-event="search"
                    id="btnSearch">
                <i class="layui-icon layui-icon-search"></i>
            </button>
        </div>
        <div class="layui-btn-group">
            <button class="layui-btn layui-btn-sm data-refresh-btn layui-btn-primary" lay-event="refresh"><i
                    class="layui-icon layui-icon-refresh"></i>刷新
            </button>
            <button class="layui-btn layui-btn-sm layui-btn-primary" lay-event="add"><i
                    class="layui-icon layui-icon-add-1"></i>添加
            </button>
        </div>
    </div>
</script>

<div hidden="hidden" id="saveSqlQueryUi">
    <form class="layui-form" action="" id="saveSqlQueryForm" lay-filter="saveSqlQueryForm">
        <div style="padding-right: 20px">
            <div class="layui-form-item" style="margin-top:20px ">
                <div class="layui-inline">
                    <label class="layui-form-label required">名称:</label>
                    <div class="layui-input-block">
                        <input type="text" id="name" name="name" lay-verify="required" lay-reqtext="名称不能为空" value=""
                               class="layui-input"></input>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label required">类名:</label>
                    <div class="layui-input-block">
                        <input type="text" name="code" lay-verify="required" lay-reqtext="类名不能为空" value=""
                               class="layui-input" style="width: 300px;"></input>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">类型:</label>
                <div class="layui-input-block">
                    <select name="isManyTable">
                        <option value="1">单表模式</option>
                        <option value="2">UNION模式</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">sql脚本:</label>
                <div class="layui-input-block">
                    <textarea style="height: 350px;" placeholder="请输入内容" class="layui-textarea" name="sqlText"
                              lay-verify="required"
                              lay-reqtext="sql脚本不能为空"></textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label required">序号:</label>
                    <div class="layui-input-block">
                        <input type="text" name="indexNum" value="" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label required">备注:</label>
                    <div class="layui-input-block">
                        <input type="text" name="remark" value="" class="layui-input">
                    </div>
                </div>
            </div>

            <input type="text" name="id" hidden></input>
        </div>
        <div style="padding-top: 5px;padding-bottom: 20px;">
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-normal layui-btn-sm" lay-submit lay-filter="saveBtn">确认</button>
                <button class="layui-btn layui-btn-primary layui-btn-sm" type="reset">重置</button>
            </div>
        </div>
    </form>
</div>

<script src="/lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script src="/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/limonte-sweetalert2/8.11.8/sweetalert2.all.js"></script>
<script>

    layui.use(['element', 'table', 'form'], function () {
        var $ = layui.jquery,
            table = layui.table,
            layer = layui.layer,
            form = layui.form
        ;
        var size = {
            width: window.innerWidth || document.body.clientWidth,
            height: window.innerHeight || document.body.clientHeight
        }

        //方法渲染：
        table.render({
            elem: '#sqlqueryTable',
            method: 'post',
            url: '/pms/GetSqlQuery',
            data: [],
            defaultToolbar: [],
            toolbar: '#toolbar',
            cols: [ [
                {field: 'id', title: '标识', hide: true},
                {field: 'code', title: '类名', width: '30%', sort: true},
                {field: 'name', title: '功能名称'},
                {field: 'remark', title: '备注'},
                {field: 'indexNum', title: '序号'},
                {field: 'isManyTable', title: '类型'},
                {
                    title: '操作', templet: function (d) {
                        // let str = '<button type="button" class="layui-btn  layui-btn-sm" onclick="getCache('+d.keyName+ ')">查看</button>';
                        return '<button type="button" class="layui-btn  layui-btn-sm" onclick=getCache("' + d.LAY_TABLE_INDEX + '")>编辑</button><button type="button" class="layui-btn layui-btn-danger layui-btn-sm" onclick=delCache("' + d.keyName + '")>清除</button>';
                    }
                }
            ]],
            size: 'lg',   //尺寸
            skin: 'nob',  //line （行边框风格）  row （列边框风格） nob （无边框风格)
            // height: '670',
            even: true,  //隔行背景
            done: function (res, curr, count) {
                if (res.code != '0') {
                    layer.alert(res.msg);
                }
            }
        });

        // 头部工具栏点击事件
        table.on('toolbar(sqlqueryTable)', function (obj) {
            switch (obj.event) {
                case 'refresh':
                    table.reload('sqlqueryTable');
                    break;
                case 'add':
                    $('#saveSqlQueryForm')[0].reset();
                    form.render();
                    openSaveSqlQueryUi("新增SqlQuery");
                    break;
                case 'search':
                    table.reload('sqlqueryTable', {
                        where: {
                            keyWords: $('#inputCode').val()
                        }
                    })
                    break;
            }
        });

        function openSaveSqlQueryUi(title) {
            layerOpenIndex = layer.open({
                type: 1,
                title: title,
                content: $("#saveSqlQueryUi"),
                area: '50%'
            });
        }

        form.on('submit(saveSqlQueryForm)', function (obj) {
            var o = form.val('saveSqlQueryForm');
            var index = layer.msg('服务器处理中...', {
                icon: 16
                , shade: 0.08,
                time: 0
            });
            $.ajax({
                url: "/pms/saveSqlQuery",
                type: "POST",
                data: form.val('saveSqlQueryForm'),
                success: function (obj) {
                    layer.close(index);
                    if (obj.code == '0') {
                        Swal.fire({
                            type: 'success',
                            title: '保存成功！'
                        });
                        table.reload('sqlqueryTable');
                    } else {
                        Swal.fire({
                            icon: 'error',
                            title: obj.msg
                        })
                    }
                }
            });
            layer.close(layerOpenIndex);
            return false;
        })

        window.getCache = function (index) {
            form.val('saveSqlQueryForm', table.cache.sqlqueryTable[index]);
            form.render();
            openSaveSqlQueryUi("编辑SqlQuery");
        }
        window.delCache = function (keyName) {
            layer.confirm('您确定要删除此缓存？', {}, function () {
                layer.closeAll();
                // delCacheBykey(keyName);
            });
        }


    });
</script>

</body>
</html>
